<template>
    <div class="wrapper">
      <van-cell-group inset>
        <van-field
          v-model="this.userheight"
          error
          required
          label="身高(cm)"
          placeholder="请输入身高(默认为0)"
          right-icon="arrow"
        />
        <van-field
          v-model="this.userweight"
          error
          required
          label="体重(kg)"
          placeholder="请输入体重(默认为0)"
          right-icon="arrow"
        />
        </van-cell-group>
        <div class="twobutton">
          <van-button type="primary"  @click="OnSumbit">提交</van-button>
          <van-button type="warning">取消</van-button>
        </div>
        <div class="analyse">
          <span>身高/体重折线图</span>
          <van-button plain hairline type="primary" class="mobutton" size="mini" to="/heightChart">修改</van-button>
          <div id="myChart"></div>
        </div>
    </div>
  </template>
<script lang="ts">
import * as echarts from 'echarts'
import { Toast } from 'vant';
import {onMounted,getCurrentInstance,reactive} from "vue";
import { useRouter } from 'vue-router'
const router = useRouter()
  export default {
    data(){
      return{
        userheight:"",
        userweight:"",
        userdatalist:[165,172],
        userweightlist:[62,64],
      }
    },
    methods:{
      OnSumbit(){
        Toast.success('提交成功');
        this.userdatalist.push(Number(this.userheight))
        this.userweightlist.push(Number(this.userweight))
        console.log(this.userweightlist)
        let myChart = echarts.init(document.getElementById("myChart"));
        myChart.setOption({
        title: {
          subtext: '身高曲线图',
          x: 'left'
        },

        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name:'身高(cm)',
          type: 'value'
        },
        series: [
          {
            data: this.userdatalist,
            type: 'line'
          },
          {
            data: this.userweightlist,
            type: 'line'
          }
        ]
      });
      }
    },
    setup() {
      onMounted(() => { // 需要获取到element,所以是onMounted的Hook
      const userdata = getCurrentInstance();
      // console.log(data)
      window.onresize = function () { // 自适应大小
        myChart.resize();
      };
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          subtext: '身高曲线图',
          x: 'left'
        },
        legend: {
          data: ['身高', '体重']
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          name:'身高(cm)',
          type: 'value'
        },
        series: [
          {
            name: '身高',
            data: userdata.data.userdatalist,
            type: 'line'
          },
          {
            name: '体重',
            data: userdata.data.userweightlist,
            type: 'line'
          }
        ]
      });
    });
  }
  };

</script>
<style lang="scss" scoped>
  .van-button--primary{
    margin-top: 20px;
    margin-left: 20px;
    width: 120px;
  }
  .van-button--warning{
    margin-top: 20px;
    margin-left: 60px;
    width: 130px;
  }
  /deep/ .van-button--mini {
    margin-left: 120px; 
    width: 50px;
  }
  /deep/  .van-field__control--error{
    color: #3c3c3c;
  }
  .van-cell{
    border: 1.2px solid #ccc;
  }
  .analyse{
    margin-top: 15px;
  }
  #myChart{
    width: 300px;
    height: 300px;
    margin-left: 35px;
  }
  span{
    margin-left: 15px;
    font-size: 20px;
    font-weight: bold;
  }
</style>